<script setup lang="ts">
import { Milkdown, useEditor } from "@milkdown/vue";
import { Crepe } from "@milkdown/crepe";

const modelValue = defineModel<string>("modelValue");

useEditor((root) => {
  const crepe = new Crepe({
    root,
    defaultValue: modelValue.value,
  });
  crepe.on((api) => {
    // beforeMount: this.beforeMountedListeners,
    // mounted: this.mountedListeners,
    // updated: this.updatedListeners,
    // markdownUpdated: this.markdownUpdatedListeners,
    // blur: this.blurListeners,
    // focus: this.focusListeners,
    // destroy: this.destroyListeners,
    // selectionUpdated: this.selectionUpdatedListeners,
    api.markdownUpdated((_ctx, markdown, preMarkdown) => {
      console.log("markdownUpdated", markdown, preMarkdown);
      modelValue.value = markdown;
    });
    // api.blur(() => {
    //   console.log("blur");
    // });
    // api.focus(() => {
    //   console.log("focus");
    // });
    // api.selectionUpdated((_ctx, _selection) => {
    // });
  });
  return crepe;
});
</script>

<template>
  <Milkdown />
</template>
